<!DOCTYPE html>
<html>
<head>
  <title>Projectile Motion Diagram</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      background-color: #ffffff;
      border: 1px solid #d3d3d3;
    }
  </style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="450"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // --- Configuration ---
  const origin = { x: 90, y: 70 };
  const arrowSize = 10;
  const particleRadius = 5;

  // --- Helper function to draw an arrow (line art) ---
  function drawArrow(fromX, fromY, toX, toY, width = 1.5) {
    const headlen = arrowSize;
    const dx = toX - fromX;
    const dy = toY - fromY;
    const angle = Math.atan2(dy, dx);
    ctx.save();
    ctx.lineWidth = width;
    ctx.beginPath();
    // Line
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    // Arrowhead
    ctx.moveTo(toX, toY);
    ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
    ctx.moveTo(toX, toY);
    ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
    ctx.stroke();
    ctx.restore();
  }

  // --- Set default styles ---
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  const baseFont = '22px Times New Roman';
  const italicFont = 'italic ' + baseFont;

  // --- Draw Axes ---
  const axisXEnd = origin.x + 360;
  const axisYEnd = origin.y + 350;
  drawArrow(origin.x, origin.y - 60, origin.x, axisYEnd); // Y-axis
  drawArrow(origin.x - 60, origin.y, axisXEnd, origin.y); // X-axis

  // --- Draw Labels ---
  // Axis labels
  ctx.font = italicFont;
  ctx.textAlign = 'left';
  ctx.textBaseline = 'middle';
  ctx.fillText('x', axisXEnd + 10, origin.y);
  
  ctx.textAlign = 'center';
  ctx.textBaseline = 'top';
  ctx.fillText('y', origin.x, axisYEnd + 10);

  // Origin label 'O'
  ctx.font = baseFont;
  ctx.textAlign = 'right';
  ctx.textBaseline = 'bottom';
  ctx.fillText('O', origin.x - 8, origin.y - 8);

  // --- Draw Gravity Vector 'g' ---
  const gArrowX = origin.x - 50;
  const gArrowYStart = origin.y + 100;
  const gArrowYEnd = gArrowYStart + 80;
  drawArrow(gArrowX, gArrowYStart, gArrowX, gArrowYEnd, 2);
  ctx.font = italicFont;
  ctx.textAlign = 'right';
  ctx.textBaseline = 'middle';
  ctx.fillText('g', gArrowX - 10, (gArrowYStart + gArrowYEnd) / 2);

  // --- Draw Particle P ---
  // Particle label 'P'
  ctx.font = baseFont;
  ctx.textAlign = 'right';
  ctx.textBaseline = 'bottom';
  ctx.fillText('P', origin.x - 12, origin.y + 2);
  // Particle circle
  ctx.beginPath();
  ctx.arc(origin.x, origin.y, particleRadius, 0, 2 * Math.PI);
  ctx.fill();
  ctx.lineWidth = 1;
  ctx.stroke();

  // --- Draw Initial Velocity Vector v₀ ---
  const v0Length = 100;
  drawArrow(origin.x, origin.y, origin.x + v0Length, origin.y, 1.5);
  // Velocity label 'v₀'
  ctx.font = italicFont;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'bottom';
  ctx.fillText('v\u2080', origin.x + v0Length / 2 + 5, origin.y - 8);

  // --- Draw Trajectory ---
  ctx.beginPath();
  ctx.moveTo(origin.x, origin.y);
  ctx.lineWidth = 2.5;
  // Parabolic equation y = k * x^2
  const k = 0.006;
  const trajectoryLength = 290;
  for (let x = 1; x <= trajectoryLength; x++) {
    const y = k * x * x;
    ctx.lineTo(origin.x + x, origin.y + y);
  }
  ctx.stroke();

</script>
</body>
</html>